<template>
    <el-form ref="TestProcessForm" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="标题" prop="title">
        <el-input v-model="form.title" placeholder="请输入标题" disabled/>
      </el-form-item>
      <el-form-item label="操作人" prop="dealUser">
        <el-input v-model="form.dealUser" placeholder="请输入操作人" disabled/>
      </el-form-item>
      <el-form-item label="文件路径" prop="filePath">
        <el-input v-model="form.filePath" placeholder="文件路径" disabled/>
      </el-form-item>
      <el-form-item label="对应流程" prop="processId">
        <el-input v-model="form.processId" placeholder="请输入流程id" disabled/>
      </el-form-item>
      <el-form-item label="当前状态" prop="stat">
        <el-select v-model="form.stat" placeholder="请选择当前状态" disabled>
          <el-option
            v-for="dict in dict.type.test_process_stat"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
</template>

<script>
import { getTestProcess } from '@/api/biz/testProcess'
import { deepCloneObj } from '@/utils'

export default {
  name: "TestProcessForm",
  dicts: ['test_process_stat'],
  props: {
    currId: {
      type: Number,
      default: 0
    },
    currType: {
      type: String,
      default: "flow" //flow-工作流 detail-业务详情页
    }
  },
  data() {
    return {
      // 弹出层标题
      title: "查看业务数据",
      // 是否显示弹出层
      open: true,
      //业务id
      bizId: 0,
      // 表单参数
      form: {},
      // 表单校验
      rules: {}
    };
  },
  created() {
    //工作流中会使用setFormData进行数据加载,详情页会在created中调用数据加载
    if("detail" == this.currType){
      this.bizId = this.currId || 0;
      this.getDetail();
    }
  },
  methods: {

    getDetail(){
      getTestProcess(this.bizId).then(response => {
        if(response.data){
          this.form = response.data
          this.open = true
        }
      })
    },

    /** --- 自定义组件必须实现方法 ---start */
    // 设置表单值
    setFormData(formData, disabled) {
      this.bizId = formData.bizId || 0;
      this.getDetail();
    },

    // 获取表单值
    getFormData() {
      console.log("getFormData .... ")
      let callback = function nullFunc() {}
      let promise = new Promise(function (resolve, reject) {
        callback = function(formData, error) {
          !error ? resolve(formData) : reject(error);
        };
      });

      this.$refs['TestProcessForm'].validate((valid) => {
        if (valid) {
          callback(this.formDataModel)
        } else {
          callback(this.formDataModel, '表单数据校验失败')
        }
      })

      return promise
    },
    // 获取表单key-类型数据(数据会存入表中,流程设计,回显时使用)
    getFormModuleType() {
      return new Promise((resolve) => {
        resolve(this.formDataModelType);
      });
    },

    // 获取表单组件属性列表(数据会存入表中,流程设计,回显时使用)
    getFieldWidgets() {
      return new Promise((resolve) => {
        resolve(this.fieldWidgets);
      });
    },

    // 禁用表单组件
    disableWidgets(widgetNames) {
      widgetNames.forEach(name => this.formDisabled[name] = true);
    },

    // 启用表单组件
    enableWidgets(widgetNames) {
      widgetNames.forEach(name => this.formDisabled[name] = false);
    },

    // 隐藏表单组件
    hideWidgets(widgetNames) {
      if(this.formHidden){
        Object.keys(this.formHidden).forEach(name => {
          this.formHidden[name] = !widgetNames.includes(name);
        });
      }

    },
    /** --- 自定义组件必须实现方法 ---end */
  }
};
</script>
<style lang="scss">
.el-input-number.full-width-input,
.el-cascader.full-width-input {
  width: 100% !important;
}

.el-form-item--medium {
  .el-radio {
    line-height: 36px !important;
  }

  .el-rate {
    margin-top: 8px;
  }
}

.el-form-item--small {
  .el-radio {
    line-height: 32px !important;
  }

  .el-rate {
    margin-top: 6px;
  }
}

.el-form-item--mini {
  .el-radio {
    line-height: 28px !important;
  }

  .el-rate {
    margin-top: 4px;
  }
}

.clear-fix:before,
.clear-fix:after {
  display: table;
  content: "";
}

.clear-fix:after {
  clear: both;
}

.float-right {
  float: right;
}

/* 组件宽度*/
.module-width {
  width: 60%;
}

.module-input-width {
  width: 40%;
}

</style>

<style lang="scss" scoped>
div.table-container {
  table.table-layout {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;

    td.table-cell {
      display: table-cell;
      height: 36px;
      border: 1px solid #e1e2e3;
    }
  }
}

div.tab-container {
}

.label-left-align ::v-deep .el-form-item__label {
  text-align: left;
}

.label-center-align ::v-deep .el-form-item__label {
  text-align: center;
}

.label-right-align ::v-deep .el-form-item__label {
  text-align: right;
}

.custom-label {
}

.static-content-item {
  min-height: 20px;
  display: flex;
  align-items: center;

  ::v-deep .el-divider--horizontal {
    margin: 0;
  }
}

</style>
